<template>
  <a-modal
    v-model:visible="modelVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    fullscreen
    body-class="modal-body"
  >
    <template #title>
      <div class="" style="width: 100%; display: flex">
        新增绩效面谈记录表模板
      </div>
    </template>
    <div class="template-steps">
      <a-steps changeable :current="current" @change="setCurrent">
        <a-step>基本设置</a-step>
        <a-step>表单设计</a-step>
        <a-step>表单预览</a-step>
        <!-- <a-step>方案模板预览</a-step> -->
      </a-steps>
    </div>
    <!-- 基础信息 -->
    <BaseInfo
      ref="baseInfoRef"
      v-show="current === 1"
      v-model:templateData="templateData"
    />
    <!-- 表单设计 -->
    <div ref="modal" v-show="current === 2">
      <FormSetting v-model:data="templateData" @goBottom="goBottom" />
    </div>
    <!-- 表单预览 -->
    <div v-show="current === 3">
      <FormReview v-model:templateData="templateData" />
    </div>
    <template #footer>
      <div class="modal-footer">
        <a-space size="large" align="center">
          <a-button type="secondary" :disabled="current <= 1" @click="onPrev">
            <IconLeft />
            上一步
          </a-button>
          <a-button
            type="primary"
            v-show="current !== 3"
            :disabled="current >= 3"
            @click="onNext"
          >
            下一步
            <IconRight />
          </a-button>
          <a-button type="primary" @click="save"> 保存 </a-button>
        </a-space>
      </div>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import { cloneDeep } from 'lodash';
import BaseInfo from './conponents/BaseInfo.vue';
import FormSetting from './conponents/FormSetting.vue';
import type { Interview } from '@/apis/management/performance/baseSetting/assessmentSetting/type';
import FormReview from './conponents/FormReview.vue';
import { useVModel } from '@vueuse/core';
const props = withDefaults(
  defineProps<{
    visible?: boolean;
    data: Interview;
  }>(),
  {
    visible: false
  }
);
const emit = defineEmits(['update:visible', 'update:data', 'handleOk', 'save']);
const handleCancel = () => {
  modelVisible.value = false;
};
const handleOk = () => {
  emit('handleOk');
  handleCancel();
};
const modelVisible = useVModel(props, 'visible', emit);
const templateData = useVModel(props, 'data', emit);
const current = ref(1);
const reset = () => {
  current.value = 1;
};
watch(
  () => props.visible,
  (val) => {
    reset();
  },
  { deep: true }
);
const onPrev = () => {
  current.value = Math.max(1, current.value - 1);
};
const baseInfoRef = ref();
const onNext = async () => {
  const check = await baseInfoRef.value.validate();
  if (check) return;
  current.value = Math.min(3, current.value + 1);
};
const setCurrent = async (n: number) => {
  const check = await baseInfoRef.value.validate();
  if (check) return;
  current.value = n;
};
const save = async () => {
  emit('save');
};
const goBottom = () => {
  nextTick(() => {
    const divDom = document.getElementsByClassName('modal-body')[0];
    divDom.scrollTo({
      top: divDom.scrollHeight,
      behavior: 'smooth'
    });
  });
};
</script>

<style lang="less" scoped>
.template-steps {
  padding: 0 160px;
  margin-bottom: 60px;
}
.modal-footer {
  display: flex;
  justify-content: center;
}
</style>
